<template>
  <view class="confirm-container">
    <view class="page-header">
      <view class="header-title">确认借条</view>
    </view>

    <view class="confirm-content">
      <view class="loan-summary">
        <view class="summary-header">
          <text class="name">{{ userInfo.username }} ({{ userInfo.idCard }})</text>
          <text style="margin: 0 10rpx;">欠</text>
          <text class="amount">{{ formData.lenderName }} ({{ maskIdNumber(formData.lenderIdCard) }}) {{ formData.amount
            }}</text>
          <text>元</text>
        </view>

        <view class="summary-details">
          <text>欠款期限为 {{ formData.startDate }} 至 {{ formData.lumpSumFormReqVO.repaymentDate }}，并承诺按年化利率 {{
            formData.interestRate }}% 计算支付利息，于到期日偿还本息。</text>
        </view>
      </view>

      <view class="parties-section">
        <view class="party-item">
          <view class="party-label">债权人：{{ formData.lenderName }}</view>
          <view class="id-number">身份证号：{{ formData.lenderIdCard }}</view>
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
          </view>
        </view>

        <view class="party-item">
          <view class="party-label">债务人：{{ userInfo.username }}</view>
          <view class="id-number">身份证号：{{ userInfo.idCard }}</view>
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
          </view>
        </view>
      </view>

      <view class="agreement-section">
        <checkbox-group @change="checkboxChange">
          <checkbox color="#1989fa" />
        </checkbox-group>
        <text class="agreement-text">已阅读并同意 <text class="link-text" @click="viewAgreement('loan_agreement')">相关协议</text></text>
      </view>

      <view class="confirm-btn" :class="{ disabled: !hasAgreed }" @click="confirmLoan">确认欠条</view>

      <view class="notice">
        <u-icon name="info-circle" color="#ff9900" size="16"></u-icon>
        <text class="notice-text">递交上传平台公示</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { createContract } from '@/api/user'
export default {
  data() {
    return {
      formData: {},
      hasAgreed: false,
      contractId: '',
      orderCreated: false
    }
  },
  onLoad() {
    this.formData = uni.getStorageSync('loanFormData')
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    viewAgreement(type) {
      uni.navigateTo({
        url: '/pages/contract/agreement?type=' + type
      })
    },
    checkboxChange(e) {
      if (e.detail.value.length == 0) {
        this.hasAgreed = false
      } else {
        this.hasAgreed = true
      }
    },
    maskIdNumber(idNumber) {
      if (!idNumber || idNumber.length < 18) return idNumber;
      return idNumber.substring(0, 3) + '*'.repeat(11) + idNumber.substring(14);
    },
    confirmLoan() {
      if (!this.hasAgreed) {
        uni.showToast({
          title: '请先阅读并同意协议',
          icon: 'none'
        })
        return
      }
      if (this.orderCreated) {
        console.log(this.contractId)
        uni.navigateTo({
          url: '/pages/face/index?contractId=' + this.contractId + '&name=borrower'
        })
      } else {
        const formData = {
          "creatorRole": this.formData.creatorRole,
          "borrowerName": this.userInfo.username,
          "borrowerIdCard": this.userInfo.idCard,
          "lenderName": this.formData.lenderName,
          "lenderIdCard": this.formData.lenderIdCard,
          "amount": this.formData.amount,
          "interestRate": this.formData.interestRate,
          "repaymentType": this.formData.repaymentType,
          "loanReasonId": this.formData.loanReasonId,
          "lumpSumFormReqVO": {
            "repaymentDate": this.formData.lumpSumFormReqVO.repaymentDate
          },
        }
        if (this.formData.repaymentType == 1) {
          formData.installmentFormReqVO = {
            "installmentCount": this.formData.installmentFormReqVO.installmentCount,
            "installmentDays": this.formData.installmentFormReqVO.installmentDays
          }
        }
        uni.setStorageSync('contractFormData', formData)
        createContract(formData).then(res => {
          console.log(res)
          this.contractId = res.data.data
          this.orderCreated = true
          uni.navigateTo({
            url: '/pages/face/index?contractId=' + this.contractId + '&name=borrower'
          })
        })
      }
    },
  }
}
</script>

<style lang="scss">
.confirm-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.header-right {
  width: 60rpx;
}

.confirm-content {
  padding: 30rpx 20rpx;
}

.loan-summary {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.summary-header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.name {
  font-weight: bold;
}

.amount {
  font-weight: bold;
}

.summary-details {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.parties-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.party-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.party-item:last-child {
  border-bottom: none;
}

.party-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.id-number {
  font-size: 26rpx;
  color: #999;
}

.arrow-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.agreement-section {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.agreement-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

.link-text {
  color: #1989fa;
}

.confirm-btn {
  height: 90rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.confirm-btn.disabled {
  background-color: #cccccc;
}

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff9900;
  font-size: 24rpx;
}

.notice-text {
  margin-left: 6rpx;
}
</style>